<template>
  <div class="flex items-center gap-4">
    <template v-for="action in actions">
      <guat-permission :permission="action.permission" :widthout-permission="!action.permission">
        <guat-tip-component v-if="action.internal || !action.text" :tip="action.tip">
          <guat-icon-button
            v-if="action.internal"
            v-bind="createInternalIconButton(action)"
            @click="action.onClick"
          />
          <guat-icon-button
            v-else-if="!action.text"
            :color="action.color"
            :icon="action.icon!"
            :size="action.iconSize ?? 24"
            @click="action.onClick"
          />
        </guat-tip-component>
        <a-button
          v-else
          :type="action.type"
          :status="action.status"
          v-bind="omit(action, 'text', 'icon', 'iconSize', 'iconOnly', 'color')"
          @click="action.onClick"
        >
          <template v-if="action.icon" #icon>
            <guat-icon :icon="action.icon!" :size="action.iconSize" />
          </template>
          {{ action.text }}
        </a-button>
      </guat-permission>
    </template>
  </div>
</template>

<script setup lang="tsx">
import { ButtonProps } from "@arco-design/web-vue";
import { Action } from "./types";
import { assign, omit } from "lodash-es";
import { iconButtons } from "@/config/internal-style";

type _Action = Partial<ButtonProps> & Action;

defineProps<{
  actions: _Action[];
}>();

const createInternalIconButton = (action: Action) => {
  const iconBtn = iconButtons[action.internal!];
  return assign(iconBtn, action) as any;
};
</script>

<style scoped></style>
